<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui" template="template/tplmain.xhtml">

    <ui:define name="contenido">
        <h:form id="frmperfil">
            <p:fieldset legend="Opciones de busqueda" toggleable="true" toggleSpeed="500" style="text-align: left">  
                <table align="center" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <td style="width: 50px;">
                            Nombre
                        </td>
                        <td style="width: 10px;">:</td>
                        <td style="width: 260px;">
                            <p:inputText styleClass="input_text_filtro" style="width: 240px;" id="txtnombreperfil" maxlength="60" value="#{mbperfil.nombrePerfil}" />
                            <p:tooltip value="Ingrese el nombre o parte del perfil a buscar" showEvent="focus"  hideEvent="blur" for="txtnombreperfil"/>
                        </td>
                        <td style="width: 50px;">
                            Estado
                        </td>
                        <td style="width: 10px;">:</td>
                        <td style="width: 250px;">
                            <p:selectOneMenu value="-1" binding="#{mbperfil.lstEstado}" styleClass="input_text_filtro" style="width: 240px;" id="lstestado">
                                <f:selectItem itemLabel="-- Todos --" itemValue="-1" />
                                <f:selectItem itemLabel="Editable" itemValue="1" />
                                <f:selectItem itemLabel="No editable" itemValue="0" />
                            </p:selectOneMenu>
                        </td>
                        <td>
                            <p:commandButton value="Buscar perfiles" actionListener="#{mbperfil.buscar}" id="btnbperfiles"   
                                             update="fsperfiles, tblPerfiles" image="ui-icon-search" />
                        </td>
                    </tr>
                </table>
            </p:fieldset> 
            <p:fieldset legend="Perfiles" toggleable="false" toggleSpeed="500" id="fsperfiles" style="text-align: left;">  
                <p:growl id="msg" showDetail="true" />
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                        <td align="right">
                            <p:commandButton value="Nuevo perfil" id="btnnperfil"   
                                             image="ui-icon-plusthick" style="text-align: right;" 
                                             actionListener="#{mbperfil.nuevoPerfil}"
                                             update=":frmdlg:dlgnperfil"
                                             ajax="true"
                                             oncomplete="nvPerfil.show()"/>
                        </td>
                    </tr>
                </table>
                <p:contextMenu for="tblPerfiles" id="ctm">
                    <p:menuitem value="Visualizar" update="dialog" icon="ui-icon-search" oncomplete="perfilDetalle.show()"/>   
                    <p:menuitem value="Editar" update=":frmdlg:dlgnperfil" actionListener="#{mbperfil.editarPerfil}" icon="ui-icon-pencil" oncomplete="nvPerfil.show()"/>
                    <p:menuitem value="Eliminar" update=":frmEliminarPerfil:dlgEliminarPerfil" icon="ui-icon-minusthick" oncomplete="dlgEliminarPerfil.show()"/>
                </p:contextMenu>
                <p:dataTable id="tblPerfiles" var="prfl" value="#{mbperfil.perfilList}" rowKey="#{prfl.idperfil}" 
                             selection="#{mbperfil.perfilSelected}" selectionMode="single" emptyMessage="Sin perfiles a mostrar" >  
                    <p:column headerText="Nombre" style="width:80%">  
                        #{prfl.nombreperfil}
                    </p:column>  
                    <p:column headerText="¿Es editable?" style="width:20%">  
                        #{prfl.iseditperfil == 0 ? 'No': 'Si'}  
                    </p:column>
                </p:dataTable>
            </p:fieldset>

            <p:dialog header="Consulta de perfil" widgetVar="perfilDetalle" resizable="false"  
                      width="250" showEffect="clip" hideEffect="fold" id="dialog" modal="true" style="text-align: left">  
                <h3><h:outputText value="#{mbperfil.perfilSelected.nombreperfil}" /></h3>
                <p:dataList value="#{mbperfil.perfilSelected.opcionSistemaList}" var="lstOp" itemType="disc" id="lstOp">
                    #{lstOp.nombreopsist}
                </p:dataList>
            </p:dialog>
        </h:form>
        <h:form id="frmdlg">
            <p:dialog header="Nuevo perfil" widgetVar="nvPerfil" resizable="false"  
                      width="470" showEffect="clip" hideEffect="fold" id="dlgnperfil" modal="true" style="text-align: left;">
                <h:panelGrid columns="1" style="margin-bottom:10px">
                    <h:outputLabel for="txtNPerfil" value="Nombre:" />  
                    <p:inputText id="txtNPerfil" value="#{mbperfil.perfilSelected.nombreperfil}" style="width: 430px;"/> 
                </h:panelGrid>
                <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">
                    <tr>
                        <td style="padding-left: 3px;vertical-align: bottom">
                            <h:outputText value="Opciones:" />
                        </td>
                        <td align="right" style="padding-right: 4px;">
                            <p:selectBooleanButton value="#{mbperfil.isEdit}" onLabel="No editable" offLabel="Editable" onIcon="ui-icon-arrowthick-1-s" offIcon="ui-icon-arrowthick-1-n" /> 
                        </td>
                    </tr>
                </table>

                <p:pickList id="pkList" value="#{mbperfil.opts}"  
                            var="opt"  converter="opSistConverter"
                            itemValue="#{opt}"  showSourceControls="false" showTargetControls="false">  
                    <f:facet name="sourceCaption">Disponible</f:facet>  
                    <f:facet name="targetCaption">Seleccionado</f:facet>  
                    <p:column >  
                        #{opt.nombreopsist}
                    </p:column>  
                </p:pickList>
                <f:facet name="footer">  
                    <p:commandButton id="btnAceptar" value="Aceptar" image="ui-icon-check" update=":frmperfil:fsperfiles"  oncomplete="nvPerfil.hide()" 
                                     actionListener="#{mbperfil.guardarPerfil}" />  
                </f:facet> 
            </p:dialog>
        </h:form>
        <h:form id="frmEliminarPerfil">
            <p:confirmDialog widgetVar="dlgEliminarPerfil" header="Confirmación" severity="alert" id="dlgEliminarPerfil" message="¿Desea eliminar el perfil '#{mbperfil.perfilSelected.nombreperfil}'?">
                <p:commandButton id="confirm" image="ui-icon-minusthick" value="Eliminar" update=":frmperfil:fsperfiles" oncomplete="dlgEliminarPerfil.hide()"  
                                 actionListener="#{mbperfil.eliminarPerfil}" ajax="true" />
                <p:commandButton id="decline" image="ui-icon-circle-close" value="Cancelar" onclick="dlgEliminarPerfil.hide()"/>
            </p:confirmDialog>
        </h:form>
    </ui:define>

</ui:composition>